<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.thymeleaf.org/extras/dialect"
      layout:decorate="layout/layout_register"
>
<head>
	<title>电子邮箱验证</title>
	<meta charset="utf-8"/>
	<link rel="stylesheet" href="../../static/asset/css/base.min.css" th:href="@{/asset/css/base.min.css}"/>
	<link rel="stylesheet" href="../../static/asset/css/common/front.css" th:href="@{/asset/css/common/front.css}"/>
	<link rel="stylesheet" href="../../static/asset/css/front/register.css" th:href="@{/asset/css/front/register.css}"/>
</head>
<body>
<div layout:fragment="content" class="wrapper mt-5">
	<div class="container">
		<div class="col-lg-4 offset-lg-4 col-md-6 offset-md-3 col-sm-8 offset-sm-2">

			<div class="register-name mb-5">
				<div class="row text-center d-flex">
					<div class="col-sm-5">
						<img src="#" th:src="@{/asset/img/email_icon.gif}" alt="" style="width:150px; height:150px;" width="150">
					</div>
					<div class="col-sm-7  align-self-center" th:if="${validateInfo.emailReadOnly}">解绑邮箱</div>
					<div class="col-sm-7  align-self-center" th:if="${!validateInfo.emailReadOnly}">绑定邮箱</div>
				</div>
			</div>

			<form th:action="@{/email/validate}" method="post" class="form-horizontal register-form container" th:object="${validateInfo}" role="form">
				<input type="hidden" id="sendCode" name="sendCode" th:field="*{sendCode}">
				<input type="hidden" id="clientId" name="clientId" th:field="*{clientId}">
				<div class="form-group">
					<div class="input-group">
						<input id="email" name="email" type="text" class="form-control form-control-lg" placeholder="电子邮箱" th:field="*{email}"
						       required data-msg-required="不能为空">
						<input type="button" id="btnSendCode" class="btn btn-primary input-group-addon" value="发送邮件">
					</div>
					<div class="form-control-feedback text-danger" th:errors="*{email}"></div>
					<small class="form-text text-muted">请输入要验证的电子邮箱</small>
				</div>

				<div class="form-group">
					<div class="input-group">
						<input id="receivedCode" name="receivedCode" type="text" class="form-control form-control-lg" placeholder="随机验证码" th:field="*{receivedCode}"
						       required data-msg-required="不能为空">
						<input type="submit" class="btn input-group-addon btn-primary" value="立即验证">
					</div>
					<div class="form-control-feedback text-danger" th:errors="*{receivedCode}"></div>
					<small class="form-text text-muted">请输入验证邮件中的验证码</small>
				</div>
			</form>

		</div>

	</div>
</div>

<th:block layout:fragment="script">
	<script type="text/javascript" src="../../static/asset/js/base.min.js" th:src="@{/asset/js/base.min.js}"></script>
	<script type="text/javascript" src="../../static/asset/js/form.min.js" th:src="@{/asset/js/form.min.js}"></script>
	<script type="text/javascript" src="../../static/asset/js/app.js" th:src="@{/asset/js/app.js}"></script>

	<script th:inline="javascript">
		/*<![CDATA[*/

		var emailReadOnly = /*[[${validateInfo.emailReadOnly}]]*/ '';
		var maxCount = /*[[${validateInfo.sendInterval}]]*/ 120;
		var sendCodeUrl = /*[[@{/email/code}]]*/ './code';

		var timeoutHandle;
		var intervalHandle;

		$(function () {
			if (emailReadOnly) {
				$('#email').attr("readonly", "readonly");
			} else {
				$('#email').on('input', function (e) {
					e.preventDefault();
					var val = $('#email').val();
					if (isEmail(val)) {
						$('#btnSendCode').removeAttr('disabled');
					} else {
						$('#btnSendCode').attr('disabled', 'disabled');
					}
				});
				$('#email').trigger("input");
			}

			$('#btnSendCode').on('click', function (e) {
				e.preventDefault();
				$('#email').attr('readonly', 'readonly');
				$('#btnSendCode').attr('disabled', 'disabled');
				timeoutHandle = setTimeout(sendCode, 10);
			});
		});

		function isEmail(str) {
			var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
			return reg.test(str);
		}

		function sendCode() {
			var newValue = $('#email').val();
			$.ajax({
				type: 'POST',
				url: sendCodeUrl + "?email=" + newValue,
				success: function (result, textStatus, jqXHR) {
					if (result.success) {
						$('#sendCode').val(result.data.sendCode);
						//延迟下次点击的间隔时间。
						intervalHandle = setInterval(delay, 1000);
					} else {
						$('#btnSendCode').removeAttr('disabled');
						if (!emailReadOnly) {
							$('#email').removeAttr('readonly');
						}
					}
				}
			});
			clearTimeout(timeoutHandle);
		}

		function delay() {
			var curCount = maxCount;
			var val = $('#btnSendCode').val();
			var infoArr = val.split("(");
			if (infoArr.length > 1) {
				curCount = parseInt(infoArr[1].replace(")", ""));
				curCount--;
			}
			if (curCount > 0) {
				$('#btnSendCode').val(infoArr[0] + "(" + curCount + ")");
			} else {
				$('#btnSendCode').val(infoArr[0]);
				$('#btnSendCode').removeAttr('disabled');
				if (!emailReadOnly) {
					$('#email').removeAttr('readonly');
				}
				clearInterval(intervalHandle);
			}
		}

		/*]]>*/
	</script>

</th:block>
</body>
</html>
